<template>
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
var echarts = require('echarts/lib/echarts') // 引入echarts主模块
require('echarts/lib/chart/radar')// 引入雷达图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {

  // 页面渲染完毕
  mounted() {
    const myEhart = echarts.init(this.$refs.myDiv) // 得到图标实例
    myEhart.setOption({ title: {
      text: '基础雷达图'
    },
    legend: {
      data: ['预算分配(Allocated Budget)', '实际开销(Actual Spending)']
    },
    radar: {
    // shape: 'circle',
    // 每个区域的最高值
      indicator: [
        { name: '工作效率', max: 100 },
        { name: '考勤', max: 100 },
        { name: '积极性', max: 100 },
        { name: '帮助同事', max: 100 },
        { name: '自主学习', max: 100 },
        { name: '正确率', max: 100 }
      ]
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [10, 1, 100, 5, 100, 0],
            name: '张三'
          },
          {
            value: [50, 100, 80, 90, 100, 90],
            name: '李四'
          }
        ]
      }
    ] })
  }
}
</script>

<style>
.radar-echart{
  width: 600px;
  height: 600px;
}
</style>
